<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :defaultFullscreen="true" destroyOnClose title="模板配置" :width="800" @ok="handleSubmit">
    <div class="template-info">
      <div>模板编码：{{ templateParams.templateCode }}</div>
      <div class="info-bottom">
        <div class="template-name">模板名称：{{ templateParams.templateName }}</div>
        <div>描述：{{ templateParams.description }}</div>
      </div>
    </div>
    <!--引用表格-->
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.editRow && column.editComponent === 'Switch'">
          <a-switch checkedChildren="是" unCheckedChildren="否" :checkedValue="'true'" :unCheckedValue="'false'" size="small" v-model:checked="record[column['dataIndex']]" />
        </template>
        <template v-if="column.editRow && column.editComponent === 'Input'">
          <a-input v-model:value="record[column['dataIndex']]" />
        </template>
      </template>
    </BasicTable>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicTable } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { configTableColumns } from '../HubTeamEvaluateIndex.data';
import { getTemplateConfigList, saveConfigs } from '../HubTeamEvaluateIndex.api';
// Emits声明
const emit = defineEmits(['register', 'success']);

const dataSource = [
  {
    saveCode: 'elementScore1',
    saveName: '',
    isOpen: false,
    displayOrder: 1,
  },
  {
    saveCode: 'elementScore2',
    saveName: '',
    isOpen: false,
    displayOrder: 2,
  },
  {
    saveCode: 'elementScore3',
    saveName: '',
    isOpen: false,
    displayOrder: 3,
  },
  {
    saveCode: 'elementScore4',
    saveName: '',
    isOpen: false,
    displayOrder: 4,
  },
  {
    saveCode: 'elementScore5',
    saveName: '',
    isOpen: false,
    displayOrder: 5,
  },
  {
    saveCode: 'elementScore6',
    saveName: '',
    isOpen: false,
    displayOrder: 6,
  },
  {
    saveCode: 'elementScore7',
    saveName: '',
    isOpen: false,
    displayOrder: 7,
  },
  {
    saveCode: 'elementScore8',
    saveName: '',
    isOpen: false,
    displayOrder: 8,
  },
  {
    saveCode: 'elementScore9',
    saveName: '',
    isOpen: false,
    displayOrder: 9,
  },
  {
    saveCode: 'elementScore10',
    saveName: '',
    isOpen: false,
    displayOrder: 10,
  },
];

let orgCode = '';
let templateParams = ref({});

//注册table数据
const { tableContext } = useListPage({
  tableProps: {
    dataSource,
    columns: configTableColumns,
    canResize: false,
    showIndexColumn: true,
    rowKey: 'id',
    formConfig: {
      showActionButtonGroup: false,
    },
  },
});

const [registerTable, { getForm, reload, getDataSource, getColumns, setColumns, setTableData }, { rowSelection, selectedRowKeys }] = tableContext;
//表单配置
//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  const templateConfigList = await getTemplateConfigList({ templateCode: data.templateCode });
  orgCode = data.orgCode;
  templateParams.value = data.templateParams;
  dataSource.forEach((temp: any) => {
    temp.templateCode = data.templateParams.templateCode;
    temp.templateName = data.templateParams.templateName;
    templateConfigList?.forEach((item) => {
      if (temp.saveCode == item.saveCode) {
        // dataItem.isNew = true
        Object.assign(temp, { ...item });
      }
    });
  });
  setTableData(dataSource);
});
//表单提交事件
async function handleSubmit(v) {
  let datas = getDataSource();
  await saveConfigs({
    datas,
    orgCode: orgCode,
  });
  closeModal();
  emit('success');
}
</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}

.template-info {
  padding: 30px;
}

.info-bottom {
  display: flex;
  margin-top: 16px;
}

.template-name {
  margin-right: 100px;
}
</style>
